/**
 * 模块名称 地区列表
 * 作者 huruqing
 */

import React, { Component } from 'react';
import CinemaList from './CinemaList'

export default class AreaList extends Component {
    constructor() {
        super();
        this.state = {
            active:0
        }
        this.getCinemaName = this.getCinemaName.bind(this);
    }
  static propTypes = {};

  componentDidMount() {}

  open(index) {
    let {active} = this.state;
    if (index === active ) {
      // 不显示
      active = -1;
    } else {
      active = index;
    }
    this.setState({
      active
    })
  }

  getCinemaName(cinemas) {
    // 使用set对象可以去重
    let set = new Set();
    // 把电影院的名称全部添加到set里面
    cinemas.forEach(item => {
        set.add(item.district.name);
    })
    return  [...set];
}

  render() {
    let cinemas = this.props.cinemas;
    let cinemaNams = this.getCinemaName(cinemas);
    return (
      <div className="cinema-area-list bg-gray">
        {cinemaNams.map((name, index) => {
            // 某个地区的电影院列表
            let earaCinemas = cinemas.filter(item=> {
                return item.district.name === name;
            })
          return (
            <div className="cinema" key={name}>
              <h3 className="title padd-left-16" onClick={()=>{this.open(index)}}>
                {name}
              </h3>
              {this.state.active === index?<CinemaList cinemas={earaCinemas}/>:''}
            </div>
          );
        })}
      </div>
    );
  }
}
